<template>
  <div class="big">
    <el-card shadow="always">
      <div>
        <video class="backgroundImg" autoplay="autoplay" loop="loop">
          <source src="../../assets/image/book.mp4" type="video/mp4" />
          你的浏览器不支持视频标签。
        </video>
      </div>

      <vue-danmaku
        v-model:danmus="danmus"
        loop
        style="height: 25rem; width: 78rem;   
            color: white; /* 白色文字 */  
            text-shadow:   
                -1px -1px 0 black,  
                1px -1px 0 black,  
                -1px 1px 0 black,  
                1px 1px 0 black; /* 黑色边缘 */  
            font-size: 40px; /* 字体大小 */  
        } "
        ref="danmaku"
        :speeds="speeds"
      ></vue-danmaku>
      <div class="buts">
        <el-popover :visible="visible" placement="top-start" :width="200">
          <span class="demonstration">弹幕速度控制</span>
          <el-slider v-model="speed" />
          <template #reference>
            <el-icon style="font-size: 28px" @click="hide()"><Setting /></el-icon>
          </template>
        </el-popover>
      </div>
      <div class="left">
        <el-input
          v-model="input"
          style="width: 200px; margin-right: 10px"
          placeholder="快来发表你的评论吧"
        />
        <el-button round @click="addComment" style="margin-right: 20px">发表</el-button>

        <el-switch v-model="value1" />
        <br />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import vueDanmaku from "vue3-danmaku";
import { ref, onMounted, reactive, watch } from "vue";
import { getComments, postComments } from "../../api/api";

const speed = ref(50);
const speeds = ref(150);
//内容
const danmus = ref([]);
const value1 = ref(false);

onMounted(() => {
  getdata();
  value1.value = true;
});

const input = ref("");

const visible = ref(false);
//弹幕组件
const danmaku = ref(null);

watch(value1, (newValue, OldValue, onCleanup) => {
  console.log(newValue);
  onCleanup(() => {
    console.log("111111");
    if (!newValue) {
      // 如果 newValue 为 false
      danmaku.value.show();
    } else {
      danmaku.value.hide();
    }
  });
});

watch(speed, (newValue, OldValue, onCleanup) => {
  onCleanup(() => {
    if (newValue > 50) {
      // 如果 newValue 为 false
      addspeeds();
    } else {
      jianspeeds();
    }
  });
});
//继续播放弹幕
const dplay = () => {
  danmaku.value.play();
};
//暂停播放弹幕
const pause = () => {
  danmaku.value.pause();
};
//显示弹幕
const show = () => {
  danmaku.value.show();
};
//隐藏弹幕
const hide = () => {
  visible.value = !visible.value;
};
//弹幕加速
const addspeeds = () => {
  speeds.value += 20;
  console.log(speeds.value);
};
//弹幕减速
const jianspeeds = () => {
  speeds.value -= 20;
  console.log(speeds.value);
};
const getdata = () => {
  getComments()
    .then(res => {
      danmus.value = res.data.map(message => {
        return message.commentMessage;
        // 返回每个消息的 commentMessage 属性
      });
      console.log(res.data, "111");
      ElMessage({
        message: "获取信息成功",
        type: "success",
      });
    })
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("获取信息失败");
    });
};

const addComment = () => {
  let comment = {
    commentMessage: input.value,
  };

  postComments(comment)
    .then(res => {
      console.log(res.data, "111");
      input.value = " ";
      ElMessage({
        message: "发布评论成功",
        type: "success",
      });
    })
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("发布失败");
    });
  getdata();
};
</script>

<style scoped>
.big {
  position: relative;
}
.backgroundImg {
  position: absolute;
  height: 30rem;
  width: 77rem;
}
.buts {
  position: absolute;
  right: 50px;
  margin-top: 95px;
}
.left {
  margin-top: 95px;
}
</style>
